import {cart} from '../data/cart.js';
import {products} from '../data/products.js';

let cartSummaryHTML='';

cart.forEach((item) =>{
const productId= item.productId;

let matchingProduct;
products.forEach((product)=>{
    if(product.id === productId){
        matchingProduct=product;
    }else{

    }
});
cartSummaryHTML +=
 `
   <div class="cart-item-container is-cart-item-container-${matchingProduct.id}">
            <div class="delivery-date">
              Delivery date: Tuesday, June 21
            </div>

            <div class="cart-item-details-grid">
              <img class="product-image"
                src="${matchingProduct.image}">

              <div class="cart-item-details">
                <div class="product-name">
                  ${matchingProduct.name}
                </div>
                <div class="product-price">
                  $${(matchingProduct.priceCents /100).toFixed(2)}
                </div>
                <div class="product-quantity">
                  <span>
                    Quantity: <span class="quantity-label">${item.quantity}</span>
                  </span>
                  <span class="update-quantity-link link-primary">
                    Update
                  </span>
                  <span class="delete-quantity-link link-primary js-delete-link">
                    Delete
                  </span>
                </div>
              </div>

             
            </div>
          </div>
        </div>
     </div>
 `;
});

document.querySelector('.js-order-summary').innerHTML= cartSummaryHTML;

document.querySelectorAll('.js-delete-link').forEach((link)=>{
  link.addEventListener('click',()=>{
     const productId =link.CDATA_SECTION_NODE.productId;
     removeFromCart(productId);

     const container=document.querySelector(`.js-cart-item-container-${productId}`)
     container.remove();
    })
})

